<template>
	<div class="snav" :class="{op:ISa}" >
		<ul class="snav-wrap">
			<li>
				<router-link :to="{name:'bAnimation',params:{tid:curTid}}" :class="">
					<p>推荐</p>
				</router-link>
			</li>
			<li v-for="(item,index) in secSnavList" :key="index">
				<router-link :to="{name:'bAnimation',params:{tid:item.tid}}" :class="">
					<p>{{item.typename}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	let partitionList=window.__INITIAL_STATE__.reduxAsyncConnect.partitionList
	export default{
		props:{
			tid:{
				type:[String,Number],
				default:"1"
			}
		},
		created(){
//			this.secSnavList=partitionList[this.tid]
//			this.curTid=this.tid
			this.$store.commit('setTid',{
				curTid:this.$route.params.tid
			})
			this.curTid=this.$store.getters.getTid
			this.secSnavList=partitionList[this.$store.getters.getTid]
//			let id = ;
//			this.SnavList=window.__INITIAL_STATE__.reduxAsyncConnect.partitionList
//			this._SetSecSnavList(this.$route.params.tid)
		},
		mounted(){
			this.scrollEvent()
		},
		data(){
			return{
				SnavList:[],
				curTid:'1',
				secSnavList:[],
				ISa:false
			}
		},
		computed:{
//			secSnavList:{
//				get:function(){
//					this.curtid = this.$store.getters.getTid
//					this.SnavList=partitionList[this.curtid]
//					return this.SnavList
//				},
//				set:function(newValue){
//////					console.log(newValue)
//////					console.log(this.curtid)
////					if(newValue){
////						this.curtid = this.$store.getters.getTid
////					}
////					this.SnavList=partitionList[this.curtid]
//				}
//			}
		},
		watch:{
			$route(newValue){
				this.$emit("chageTid",newValue.params.tid)
			},
			tid(newValue){
//				this.SnavList=partitionList[this.tid]//实时更新SnavList的内容
				this.curTid=this.$store.getters.getTid
				this.secSnavList=partitionList[this.$store.getters.getTid]
			}
		},
		methods:{
			_SetSecSnavList(tid){
				const hasCon=partitionList[tid]
//				console.log(hasCon)
				if(!hasCon){
					//遍历大对象的属性名(键名)
					let handleNav=function(){
						const keyArr = Object.keys(partitionList)
	//					console.log(keyArr)
						//核心:tid==obj.tid
						for(let i=0,len=keyArr.length;i<len;i++){
							const tmpArr = partitionList[keyArr[i]]
							for(let j=0;j<tmpArr.length;j++){
								//内循环
//								console.log(tmpArr[j])
								//核心代码
								if(tmpArr[j].tid==tid){
									return keyArr[i]
								}
							}
						}
					}
					this.curtid=handleNav()
				}else{
					this.curtid=tid
				}
				this.secSnavList=partitionList[this.curtid]
			},
			scrollEvent(){
				let self = this;
				let scrollDirection;
				let scrollAction = {x: 'undefined', y: 'undefined'};
				window.addEventListener("scroll",(e)=>{
					let doc = window.pageYOffset;
				    if (typeof scrollAction.x == 'undefined') {
				        scrollAction.x = window.pageXOffset;
				        scrollAction.y = window.pageYOffset;
				    }
				    var diffX = scrollAction.x - window.pageXOffset;
				    var diffY = scrollAction.y - window.pageYOffset;
				    if (diffX < 0) {
				        // Scroll right
				        scrollDirection = 'right';
				    } else if (diffX > 0) {
				        // Scroll left
				        scrollDirection = 'left';
				    } else if (diffY < 0) {
				        // Scroll down
				        scrollDirection = 'down';
				    } else if (diffY > 0) {
				        // Scroll up
				        scrollDirection = 'up';
				    } else {
				        // First scroll event
				    }
				    scrollAction.x = window.pageXOffset;
				    scrollAction.y = window.pageYOffset;
			        if(scrollDirection == 'down'){
			            //页面向下滚动要做的事情
			            if(doc>=30){
//							console.log(doc)
			            	self.ISa=true
			            }
			            
			        }
			        else if(scrollDirection == 'up'){
		            	self.ISa=false
			        }
			    })
			},
		}
	}
</script>

<style lang="scss">
	.snav{
	    width: 100%;
	    overflow: hidden;
        background-color: #f9f9f9;
        height: 46px;
        position: fixed;
        z-index: 1;
        transition: all .5s;
        padding-top: 1%;
	}
	.snav-wrap{
	    overflow-x: scroll;
	    overflow-y: hidden;
	    white-space: nowrap;
	    padding-left: 5%;
	    -webkit-overflow-scrolling: touch;
	    padding-bottom: 2%;
        line-height: 46px;
	    &::-webkit-scrollbar{
	    	display: none;
	    }
	    li{
    	    display: inline-block;
    		margin-right: 7%;
    		a{
    			text-decoration: none;
    			font-size: 14px;
			    line-height: 28px;
			    text-align: center;
			    color: #757575;
    		}
    		.router-link-exact-active{
    			color: #fb7299;
    		}
	    }
	}
</style>